<template>
  <div class="my-circle">
    <mtHeader
      fixed
      title="我的圈子"
      style="background: linear-gradient(0deg, #399f00, #26701a);height:1rem"
    >
        <div class="header-left iconfont" slot="left" @click="$router.back(-1)">&#xe623;</div>
        <div slot="right" @click="btnSort" :class="{active: isActive}">{{sort}}</div>
    </mtHeader>
    <div class="container">
      <mt-cell-swipe class="slot-item" 
        :right="[
            {
            content: 'Delete',
            style: { background: 'red', color: '#fff' },
            handler: () => this.$messagebox('delete')
            }
        ]"
      >
      <div slot="icon">
        <div class="slot-con">
          <div class="slot-left"><img src="/static/img/soccerbig.png" alt="" ></div>
          <div class="slot-cen">
            <p class="slot-tit">我的圈子</p>
            <p class="slot-details">我的圈子内容</p>
          </div>
        </div>
      </div>

      <!-- <div slot="-">
        <p>我的圈子标题</p>
        <p>我的大噶嘎嘎</p>
      </div> -->
      </mt-cell-swipe>
    </div>
    <!-- <div v-show="isActive" class="mask"></div> -->
    <mt-popup
      v-model="isActive"
      popup-transition="popup-fade" class="mask">
      <div slot class="mask-con">
        <p class="mask-cn1" @click="changeSort('默认排序')">默认排序</p>
        <div class="line-h"></div>
        <p class="mask-cn2" @click="changeSort('时间排序')">时间排序</p>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import { Header, CellSwipe,Popup  } from "mint-ui";

export default {
  name: "myCircle",
  components: {
    mtHeader: Header,
    mtCellSwipe: CellSwipe,
    mtPopup:Popup
  },
  data: function() {
    return {
      title: "",
      sort: "默认排序",
      isActive:false
    };
  },
  methods: {
    btnSort() {
      this.isActive=!this.isActive;
    },
    changeSort(p){
      if(this.sort==p){
        return;
      }
      this.sort=p;
      this.isActive=false
    }
  }
};
</script>
<style lang="less" scoped>
@import url('~styles/common.less');
</style>